<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="index.css" />
    <meta charset="UTF-8" />
    <meta />
  </head>

  <body>
    <nav class="z-depth-0" id="nav-area">
      <div class="nav-drag-region" id="drag-area"></div>
      <div class="nav-wrapper">
        <i class="material-icons left" id="logo">vpn_key</i>

        <ul class="right">
          <li class="head-li">
            <a title="最小化" id="min-btn" class="btn-floating tiny-btn"></a>
          </li>
          <li class="head-li">
            <a
              title="最大化"
              id="max-btn"
              class="btn-floating tiny-btn white"
            ></a>
          </li>
          <li class="head-li">
            <a
              title="关闭"
              id="close-btn"
              class="btn-floating tiny-btn red"
            ></a>
          </li>
        </ul>
      </div>
    </nav>

    <div class="chrome-tabs" id="tabs-area">
      <div class="chrome-tabs-content"></div>
      <!-- <div class="chrome-tabs-bottom-bar"></div> -->
    </div>

    <div id="tab-add-btn">
      <i class="material-icons">add_box</i>
    </div>

    <div id="editor-area"></div>

    <div id="menu-area" hidden>
      <div class="row">
        <div class="col s12" id="menu-tabs-row">
          <ul class="tabs" id="menu-tabs">
            <li class="tab col s2">
              <a class="active" href="#general-tab">general</a>
            </li>
            <li class="tab col s2"><a href="#transmit-tab">transmit</a></li>
            <li class="tab col s2"><a href="#advance-tab">advance</a></li>
            <li class="tab col s2"><a href="#fileops-tab">file ops</a></li>
            <li class="tab col s2"><a href="#chart-tab">chart</a></li>
            <li class="tab col s2"><a href="#about-tab">about</a></li>
          </ul>
        </div>
        <div id="general-tab" class="col s12">
          <div class="col s6">
            <div class="row config-row">
              <div class="col s5 config-key">
                <p>Hex Mode</p>
              </div>
              <div class="col s7 config-item">
                <div class="switch">
                  <label>
                    Off
                    <input type="checkbox" id="hexmode-switch" />
                    <span class="lever"></span>
                    On
                  </label>
                </div>
              </div>
            </div>

            <div class="row config-row">
              <div class="col s5 config-key">
                <p>Timestamp</p>
              </div>
              <div class="col s7 config-item">
                <div class="switch">
                  <label>
                    Off
                    <input type="checkbox" id="timestamp-switch" />
                    <span class="lever"></span>
                    On
                  </label>
                </div>
              </div>
            </div>

            <div class="row config-row">
              <div class="col s5 config-key">
                <p>Modem Signal</p>
              </div>
              <div class="col s7 config-item">
                <div class="switch">
                  <label>
                    Off
                    <input type="checkbox" id="modem-signal-switch" />
                    <span class="lever"></span>
                    On
                  </label>
                </div>
              </div>
            </div>

            <div class="row config-row">
              <div class="col s7 config-key">
                <p>Customized Baud Rate</p>
              </div>
              <div class="input-field col s3 config-item">
                <input
                  id="customized"
                  value="9600"
                  type="text"
                  class="validate"
                />
              </div>
            </div>
            <div class="row config-row">
              <div class="col s4 config-key">
                <p>Font Size</p>
              </div>
              <div class="input-field col s8 config-item">
                <input id="editor-font-size" type="text" placeholder="12" />
              </div>
            </div>
            <div class="row config-row">
              <div class="col s4 config-key">
                <p>Font Family</p>
              </div>
              <div class="input-field col s8 config-item">
                <input id="editor-font-family" type="text" />
              </div>
            </div>
          </div>
          <div class="col s6">
            <div class="col s5">
              <div class="col s12 config-key">
                <p>Port Options</p>
              </div>
            </div>

            <div class="col s7 config-list">
              <div class="input-field col s12">
                <select id="databits-select">
                  <option value="1" selected>8</option>
                  <option value="2">7</option>
                  <option value="3">6</option>
                  <option value="4">5</option>
                </select>
              </div>

              <div class="input-field col s12">
                <select id="parity-select">
                  <option value="1" selected>None</option>
                  <option value="2">Even</option>
                  <option value="3">Odd</option>
                  <option value="4">Mark</option>
                  <option value="5">Space</option>
                </select>
              </div>

              <div class="input-field col s12">
                <select id="stopbits-select">
                  <option value="1" selected>1</option>
                  <option value="2">2</option>
                </select>
              </div>

              <div class="input-field col s12">
                <select id="flowcontrol-select">
                  <option value="1" selected>None</option>
                  <option value="2">RTSCTS</option>
                  <option value="3">XON</option>
                  <option value="4">XOFF</option>
                </select>
              </div>
            </div>
          </div>
        </div>
        <div id="transmit-tab" class="col s12">
          <div class="col s12">
            <div class="row config-row">
              <div class="col s1"></div>
              <div class="input-field col s9">
                <input placeholder="Data" id="trans-data" type="text" />
              </div>

              <div class="col s2">
                <a class="btn-small waves-effect" id="trans-send-btn"
                  ><i class="material-icons">send</i></a
                >
              </div>
            </div>

            <div class="row config-row">
              <div class="col s1"></div>
              <div class="col s1 config-key">
                <p>EOF</p>
              </div>
              <div class="col s2">
                <div class="input-field" id="trans-eof-row">
                  <select id="trans-eof-select">
                    <option value="1" selected>CRLF</option>
                    <option value="2">LF</option>
                    <option value="3">CR</option>
                  </select>
                </div>
              </div>

              <div class="col s1"></div>
              <div class="col s1 config-key">
                <p>Hex Mode</p>
              </div>
              <div class="col s3 config-item">
                <div class="switch">
                  <label>
                    Off
                    <input type="checkbox" id="trans-hexmode-switch" />
                    <span class="lever"></span>
                    On
                  </label>
                </div>
              </div>
            </div>
            <div class="row config-row">
              <div class="col s1"></div>
              <div class="col s1 config-key">
                <p>Clean</p>
              </div>
              <div class="col s2 config-item">
                <div class="switch">
                  <label>
                    <input type="checkbox" id="trans-clean-switch" />
                    <span class="lever"></span>
                  </label>
                </div>
              </div>

              <div class="col s1"></div>
              <div class="col s1 config-key">
                <p>Repeat</p>
              </div>
              <div class="col s3 config-item">
                <div class="switch">
                  <label>
                    Off
                    <input type="checkbox" id="trans-repeat-switch" />
                    <span class="lever"></span>
                    On
                  </label>
                </div>
              </div>
              <div class="input-field col s1 config-item">
                <input
                  id="trans-repeat-interval"
                  placeholder="repeat interval, unit: ms"
                  value="1000"
                  type="text"
                />
              </div>
            </div>
          </div>

          <div class="col s12">
            <!-- <p id="trans-log-p">transmit log</p> -->
            <div class="row" id="trans-log-row">
              <div class="col s1"></div>
              <div class="input-field col s9">
                <textarea
                  id="trans-log-area"
                  class="materialize-textarea"
                ></textarea>
                <label for="trans-log-area">History</label>
              </div>

              <div class="col s2 right-btn">
                <a class="btn-small waves-effect red" id="trans-log-btn"
                  ><i class="material-icons">delete</i></a
                >
              </div>
            </div>
          </div>
        </div>
        <div id="advance-tab" class="col s12">
          <div class="col s4">
            <blockquote>Sign</blockquote>
            <div class="divider"></div>
            <div class="row config-row">
              <div class="col s12 config-item center">
                <div class="switch">
                  <label>
                    Off
                    <input type="checkbox" id="sign-switch" />
                    <span class="lever"></span>
                    On
                  </label>
                </div>
              </div>
            </div>

            <div class="row config-row">
              <div class="input-field col s12">
                <input placeholder="Name" type="text" id="sign-name" />
              </div>
            </div>
          </div>

          <div class="col s4">
            <blockquote>Breakpoint</blockquote>
            <div class="divider"></div>
            <div class="row config-row">
              <div class="col s12 config-item center">
                <div class="switch">
                  <label>
                    Off
                    <input type="checkbox" id="breakpoint-switch" />
                    <span class="lever"></span>
                    On
                  </label>
                </div>
              </div>
            </div>

            <div class="row config-row">
              <div class="input-field col s12">
                <input
                  placeholder="Trigger pattern, such as 'Error'"
                  value="Error"
                  id="breakpoint-on-text"
                  type="text"
                  maxlength="16"
                />
              </div>
            </div>

            <div class="row config-row">
              <div class="input-field col s12">
                <input
                  placeholder="After lines, such as '5'"
                  value="5"
                  id="breakpoint-after-lines"
                  type="text"
                />
              </div>
            </div>
          </div>

          <div class="col s4">
            <blockquote>Bar Color</blockquote>
            <div class="divider"></div>
            <div class="center" id="color-panel">
              <input value="#ffba3a" id="bar-color-head" type="color" />
              <input value="#ff8a80" id="bar-color-middle" type="color" />
              <input value="#80d8ff" id="bar-color-tail" type="color" />
            </div>
          </div>
        </div>
        <div id="fileops-tab" class="col s12">
          <div class="col s12">
            <blockquote>Capture to File</blockquote>
            <div class="divider"></div>
            <div class="row config-row">
              <div class="col s3 config-item">
                <div class="switch">
                  <label>
                    Off
                    <input type="checkbox" id="capture-file-switch" />
                    <span class="lever"></span>
                    On
                  </label>
                </div>
              </div>
              <div class="input-field col s9">
                <input
                  readonly
                  value=""
                  placeholder="Capture File Path"
                  id="capture-file-path"
                  type="text"
                />
              </div>
            </div>
          </div>
          <div class="col s12">
            <blockquote>Extra Shortcuts</blockquote>
            <div class="divider"></div>

            <div class="row">
              <div class="col s6">
                <table>
                  <tbody>
                    <tr>
                      <td>Open File</td>
                      <td>Cmd/Ctrl + O</td>
                    </tr>
                    <tr>
                      <td>Open File in New Tab</td>
                      <td>Cmd/Ctrl + Shift + O</td>
                    </tr>
                    <tr>
                      <td>Open Binary File</td>
                      <td>Cmd/Ctrl + B</td>
                    </tr>
                    <tr>
                      <td>Save File</td>
                      <td>Cmd/Ctrl + S</td>
                    </tr>
                    <tr>
                      <td>Save as File</td>
                      <td>Cmd/Ctrl + Shift + S</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="col s6">
                <table>
                  <tbody>
                    <tr>
                      <td>Switch Port</td>
                      <td>Cmd/Ctrl + D</td>
                    </tr>
                    <tr>
                      <td>Clear Log</td>
                      <td>Cmd/Ctrl + X</td>
                    </tr>
                    <tr>
                      <td>Switch Port&Clear Log</td>
                      <td>Cmd/Ctrl + Shift + D</td>
                    </tr>
                    <tr>
                      <td>New Tab</td>
                      <td>Cmd/Ctrl + T</td>
                    </tr>
                    <tr>
                      <td>Swtich to Tab 1..5</td>
                      <td>Cmd/Ctrl + 1..5</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <div id="chart-tab" class="col s12">
          <div id="chart" class="col s12"></div>
          <div class="col s6" id="chart-menu">
            <div title="可视化开关" id="chart-switch-div" class="switch">
              <label>
                <input type="checkbox" id="chart-switch" />
                <span class="lever"></span>
              </label>
            </div>
            <div title="清除数据" id="chart-clean-div">
              <a
                class="waves-effect btn-floating btn-small red"
                id="chart-clean"
                ><i class="material-icons">delete</i></a
              >
            </div>
          </div>
        </div>
        <div id="about-tab" class="col s12">
          <div class="col s6">
            <div class="row label-row">
              <div class="col s3 label-key">
                <p>Version</p>
              </div>
              <div class="col s3">
                <p id="app-version"></p>
              </div>
            </div>
            <div class="row label-row">
              <div class="col s3 label-key">
                <p>Licence</p>
              </div>
              <div class="col s3">
                <p>MIT</p>
              </div>
            </div>
            <div class="row label-row">
              <div class="col s3 label-key">
                <p>Star Me</p>
              </div>
              <div class="col s3">
                <p>
                  <a href="https://gitee.com/xenkuo/comNG" id="star-me"
                    >Star ME!</a
                  >
                </p>
              </div>
            </div>
            <div class="row label-row">
              <div class="col s3 label-key">
                <p>Feedback</p>
              </div>
              <div class="col s9">
                <p>
                  <a href="https://gitee.com/xenkuo/comNG/issues" id="issue"
                    >Feedback</a
                  >
                </p>
              </div>
            </div>
            <div class="row label-row">
              <div class="col s3 label-key">
                <p>Documents</p>
              </div>
              <div class="col s9">
                <p>
                  <a
                    href="https://gitee.com/xenkuo/comNG/blob/master/doc/Introduction.md"
                    id="comnglang"
                    >User Manual</a
                  >
                </p>
              </div>
            </div>
            <div class="row label-row">
              <div class="col s4 config-key">
                <p>Preview</p>
              </div>
              <div class="col s8 config-item">
                <div class="switch">
                  <label>
                    Off
                    <input type="checkbox" id="insider-preview" />
                    <span class="lever"></span>
                    On
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div class="col s6 image">
            <div align="center">
              <p class="config-key">Donation</p>
              <img src="../image/donation.png" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row" id="bar-area">
      <div class="col s12" id="modem-signal-bar" hidden>
        <div class="col s1"></div>
        <a class="btn-small modem-btn col s1 disabled" id="cts-btn">CTS</a>
        <div class="col s1"></div>
        <a class="btn-small modem-btn col s1 disabled" id="dsr-btn">DSR</a>
        <div class="col s1"></div>
        <a class="btn-small modem-btn col s1 disabled" id="dcd-btn">DCD</a>
        <div class="col s1"></div>
        <div class="col s1"></div>

        <a class="btn-small waves-effect modem-btn grey col s1" id="rts-btn"
          >RTS</a
        >
        <div class="col s1"></div>
        <a class="btn-small waves-effect modem-btn grey col s1" id="dtr-btn"
          >DTR</a
        >
      </div>
      <div class="col s2">
        <a id="menu-btn" class="waves-effect btn-floating btn-small"
          ><i title="设置" class="material-icons">menu</i></a
        >
      </div>

      <div class="col s10">
        <div class="input-field col s3" id="baud-input">
          <div class="container">
            <select id="baud-select">
              <option value="1">4800</option>
              <option value="2">9600</option>
              <option value="3">19200</option>
              <option value="4" selected>115200</option>
              <option value="5">921600</option>
            </select>
          </div>
        </div>

        <div class="input-field col s4" id="path-input">
          <select id="path-select">
            <option value="0">Select port ...</option>
          </select>
        </div>

        <div title="串口开关" class="switch col s2">
          <label>
            <input type="checkbox" id="port-switch" />
            <span class="lever"></span>
          </label>
        </div>

        <div class="col s1">
          <a class="waves-effect btn-floating btn-small red" id="clear-btn"
            ><i class="material-icons">delete</i></a
          >
        </div>

        <div class="col s1"></div>

        <div title="自动刷新" class="col s1">
          <a class="waves-effect btn-floating btn-small" id="downward-btn"
            ><i class="material-icons">trending_down</i></a
          >
        </div>
      </div>
    </div>

    <!-- You can also require other files to run in this process -->
    <script src="index.js"></script>
  </body>
</html>
